<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <!-- <el-form-item label="告警分类：" label-width="90px">
              <el-select v-model="param.warnStatus" placeholder="选择状态" :clearable="true" size="small" style="width:150px;">
                <el-option label="故障告警" value="1"></el-option>
                <el-option label="离线告警" value="2"></el-option>
                <el-option label="消防告警" value="3"></el-option>
                <el-option label="周界告警" value="4"></el-option>
                <el-option label="周位告警" value="5"></el-option>
              </el-select>
            </el-form-item> -->
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入告警名称关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>

              <el-form-item style="float: right">
                <el-button size="mini" type="primary" plain @click="handleAdd"
                  ><i class="el-icon-download"></i>
                  导出数据
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              max-height="480px"
              ref="talbes"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="alarm_records_name" label="告警名称">
              </el-table-column>
              <el-table-column prop="alarm_description" label="告警描述">
              </el-table-column>
              <el-table-column prop="is_turn_to_order" label="是否转工单" width="100">
                <template #default="scope">
                  <font v-if="scope.row.is_turn_to_order == '1'">是</font>
                  <font v-if="scope.row.is_turn_to_order == '0'">否</font>
                </template>
              </el-table-column>
              <el-table-column prop="is_affirm" label="是否确定" width="100">
                <template #default="scope">
                  <font v-if="scope.row.is_affirm == '1'">是</font>
                  <font v-if="scope.row.is_affirm == '0'">否</font>
                </template>
              </el-table-column>
              <el-table-column prop="is_ignore" label="是否忽略" width="100">
                <template #default="scope">
                  <font v-if="scope.row.is_ignore == '1'">是</font>
                  <font v-if="scope.row.is_ignore == '0'">否</font>
                </template>
              </el-table-column>
              <el-table-column
                prop="device_id"
                label="告警设备id"
                width="100"
              ></el-table-column>
              <el-table-column prop="alarm_records_id" label="告警id" width="300">
                <template slot-scope="scope">
                  <el-popover placement="top-start" width="400" trigger="hover">
                    <span>{{ scope.row.alarm_records_id }}</span>
                    <span slot="reference">{{
                      scope.row.alarm_records_id.substr(1, 30) + "..."
                    }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="inform_records_ids"
                label="通知记录id"
                width="100"
                v-if="false"
              ></el-table-column>

              <el-table-column prop="alarm_type" label="告警分类">
                <template #default="scope">
                  <font v-if="scope.row.alarm_type == 1">故障告警</font>
                  <font v-if="scope.row.alarm_type == 2">离线告警</font>
                  <font v-if="scope.row.alarm_type == 3">消防告警</font>
                  <font v-if="scope.row.alarm_type == 4">周界告警</font>
                  <font v-if="scope.row.alarm_type == 5">周位告警</font>
                </template>
              </el-table-column>
              <el-table-column prop="alarm_level" label="告警等级">
                <template #default="scope">
                  <font v-if="scope.row.alarm_level == 1">一般</font>
                  <font v-if="scope.row.alarm_level == 2">较严重</font>
                  <font v-if="scope.row.alarm_level == 3">严重</font>
                </template>
              </el-table-column>
              <el-table-column
                prop="resolve_date"
                label="处理日期"
                width="100"
                :formatter="dateFormat"
              ></el-table-column>
              <el-table-column
                prop="create_date"
                label="告警时间"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="240">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.is_affirm == '1'"
                    disabled
                    type="text"
                    style="color: #cdc5bf; margin: 3px; padding: 0px"
                    >已确认
                  </el-button>
                  <el-button
                    v-if="scope.row.is_affirm == '0'"
                    @click="affirmClick(scope.row)"
                    type="text"
                    style="color: #18bc9c; margin: 3px; padding: 0px"
                    >确认
                  </el-button>
                  |

                  <el-button
                    v-if="scope.row.is_ignore == '1'"
                    disabled
                    type="text"
                    style="color: #cdc5bf; margin: 3px; padding: 0px"
                    >已忽略
                  </el-button>
                  <el-button
                    v-if="scope.row.is_ignore == '0'"
                    @click="ignoreClick(scope.row)"
                    type="text"
                    style="color: #18bc9c; margin: 3px; padding: 0px"
                    >忽略
                  </el-button>
                  |

                  <el-button
                    v-if="scope.row.is_turn_to_order == '1'"
                    disabled
                    type="text"
                    style="color: #cdc5bf; margin: 3px; padding: 0px"
                    >已转工单
                  </el-button>
                  <el-button
                    v-if="scope.row.is_turn_to_order == '0'"
                    @click="toorderClick(scope.row)"
                    type="text"
                    style="color: #18bc9c; margin: 3px; padding: 0px"
                    >转工单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import SideHeader from "@/views/inc/SideHeader";
// import Navlanmu from "@/views/inc/Navlanmu";
// import LeftMenuMessage from "@/views/inc/LeftMenuMessage";
import { getDateTimes, numFormat, getDateWeek, downloadCallback } from "@/utils/index.js";
import { getlist, getexpro, getgridsave, updateAlarmMsgStatus } from "@/api/message/list";
import { loginWx } from "@/api/newRequest/moreRequest.js";
import moment from "moment";
import axios from "axios";

export default {
  name: "Electricboard",
  // components: {SideHeader, Navlanmu, LeftMenuMessage},
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        funId: "msg_alarm_records",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      selectionChangeData: [],
      fromData: {
        funId: "msg_alarm_records",
        is_iot: false,
        datas: [{}],
      },
      token: "",
    };
  },
  mounted() {
    this.getDatas();
  },
  created() {
    this.isloading = false;
  },
  methods: {
    //确认弹出框
    affirmClick(e) {
      this.getDatas();
      console.log(333312, e);
      this.fromData.datas[0] = e;
      this.fromData.datas[0].is_affirm = "1";
      this.fromData.datas[0].resolve_date = Date.parse(new Date());

      // this.fromData.datas[0].resolve_date = Date.parse(new Date())

      console.log(this.fromData.datas[0].resolve_date);

      this.$confirm(`是否确认当前记录(${e.alarm_records_name}), 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(this.fromData);

        getgridsave(this.fromData).then((res) => {
          console.log(res);
          if (res.data.code === "200") {
            console.log("ces", res.data);
            this.$message({
              message: "确认成功",
              type: "success",
            });

            this.getDatas();
          } else {
            this.$message({
              message: "确认失败",
              type: "error",
            });
          }
        });
      });
    },
    //忽略弹出框
    ignoreClick(e) {
      this.getDatas();
      this.fromData.datas[0] = e;
      this.fromData.datas[0].is_ignore = "1";
      this.fromData.datas[0].resolve_date = Date.parse(new Date());

      this.$confirm(`是否忽略当前记录(${e.alarm_records_name}), 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getgridsave(this.fromData).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "忽略成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "忽略失败",
              type: "error",
            });
          }
        });
      });
    },
    //转工单弹出框
    toorderClick(e) {
      this.getDatas();
      this.fromData.datas[0] = e;
      this.fromData.datas[0].is_turn_to_order = "0";
      this.fromData.datas[0].resolve_date = Date.parse(new Date());

      // loginWx({account: 'admin', password: 'ob_1357@KingAdmin'}).then(
      //     res => {
      //       console.log(res)
      //     }
      // )
      axios
        .post("https://ibms.on-bright.com:8000/propertyService/app/login", {
          account: "sub_admin",
          password: "<:GOpkAH",
        })
        .then((res) => {
          console.log(111, res);
          this.token = res.data.result.token;
        });

      this.$confirm(`是否把当前记录转工单(${e.alarm_records_name}), 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(this.fromData);

        // updateAlarmMsgStatus({type:'repair',alarm_id:this.fromData.datas[0]?.alarm_records_id}).then(res=>{
        //   console.log(21,res)
        // })

        axios
          .post(
            `https://ibms.on-bright.com:8000/propertyService/wx/alarmMsg/updateAlarmMsgStatus?token=${this.token}`,
            { type: "repair", alarm_id: this.fromData.datas[0]?.select_id }
          )
          .then((res) => {
            console.log(res);
          });

        // updateAlarmMsgStatus('repair',this.fromData.datas[0]?.alarm_records_id).then(res => {
        //   console.log(1111,res)
        // })

        getgridsave(this.fromData).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "转工单成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "转工单失败",
              type: "error",
            });
          }
        });
      });
    },
    // 复选框按钮
    selectionChange(e) {
      this.selectionChangeData = e;
    },
    handleAdd() {
      let fromData = {
        exportFields: [],
        ids: [],
        funId: "msg_alarm_records",
      };
      //动态获取表头
      let fields = [];
      this.$refs.talbes.$children.forEach((item) => {
        if (item.label != undefined && item.prop != undefined) {
          fields.push({
            title: item.label,
            value: item.prop,
          });
        }
        fromData.exportFields = JSON.stringify(fields);
      });
      //获取主键ID
      if (this.selectionChangeData.length != 0) {
        this.selectionChangeData.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
          }
          fromData.ids += item.alarm_records_id;
        });
      } else {
        this.tabledatas.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
            // console.log('fromData.ids',fromData.ids)
          }
          fromData.ids += item.alarm_records_id;
        });
      }
      // getexpro(fromData).then((res) => {
      //   //获取文件流下载
      //   downloadCallback(res)
      // })
      downloadCallback(fromData, this.selectionChangeData.length);
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    getDatas() {
      if (this.param.warnStatus == "" && this.param.name == "") {
        this.param.baseSQL = "";
      } else {
        this.param.baseSQL =
          'alarm_type like "%' +
          this.param.warnStatus +
          '%" and ' +
          'alarm_records_name like "%' +
          this.param.name +
          '%"';
      }
      // axios.post('http://192.168.10.238:8098/msg/list',this.param).then(res=>{
      //   let resdata = res.data
      //   this.tabledatas = resdata.rows
      //   this.dataTotal = resdata.total
      // })
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.dataTotal = resdata.total;
          // console.log('this.tabledatas',this.tabledatas)
        }
      });
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
